<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax提示用户</title>
    <script src="/static/jquery-3.4.1.js"></script>
    <style>

        body {
            height: 3000px;
        }

        .ajaxButton {
            display: block;
            margin-top: 500px;
        }

    </style>
</head>
<body>
<div id="loadGif" style="width:66px;height:66px;position:absolute;top:50%;left:50%; display: none;">
    　　<p>加载中...</p>
</div>
<button class="ajaxButton">发起ajax</button>
<button class="ajaxButton">发起ajax</button>
<button class="ajaxButton">发起ajax</button>
<button class="ajaxButton">发起ajax</button>
</body>
<script>

    $(function () {
        buttonInit();
    });

    function buttonInit() {
        $('.ajaxButton').click(function () {
            pageLoading();
            let data = {
                id: 1
            };
            $.ajax({
                /*设置请求方式*/
                type: "get",
                /*请求路径*/
                url: "/api/restful",
                /*请求携带的参数*/
                data: data,
                /*是否异步*/
                async: true,
                /*返回的数据类型*/
                dataType:"json",//返回数据类型
                /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
                contentType: 'application/x-www-form-urlencoded',
                /*请求成功的回调函数*/
                success: function(response){
                    console.log(response);
                    pageLoadSuccess();
                }

            });
        });
    }

    function pageLoading() {
        $("#loadGif").css({
            top: getPageScrollTop()
        }).show();
        $('body').css({
             backgroundColor: '#00CED1'
        });
    }

    function pageLoadSuccess() {
        $("#loadGif").hide();
        $('body').css({
            backgroundColor: '#FFFFFF'
        });
    }
    
    function getPageScrollTop() {
        let scrollTopVal = document.documentElement.scrollTop;
        let screenHeight = window.screen.availHeight;

        if(scrollTopVal === 0) {
            return '50%';
        }
        return (scrollTopVal + screenHeight / 3) + 'px';
    }

</script>
</html>